<template>
  <!-- 歌单的主要内容区域 -->
  <div class="content">
    <div class="content-wrap">
      <div class="content-item" v-for="(item, index) in 25" :key="index">
        <img src="./img/1.jpg" />
        <!-- 图片的蒙版 -->
        <a
          class="mask"
          title="欧美万评优质女声•萦绕耳畔忆于心间"
          @click="toDetailPlaylist"
        ></a>
        <div class="icon">
          <span></span>
          <span>66万</span>
          <a href="javascrpt:;"></a>
        </div>
        <p class="top text-ellipsis">欧美万评优质女声•萦绕耳畔忆于心间</p>
        <p class="bottom">
          <span>by</span>
          <a href="javascript:;" title="pure日月">pure日月</a>
          <img src="./img/2.png" />
        </p>
      </div>
    </div>
    <pager
      :currentPage="currentPage"
      pageSize="25"
      :pageGroup="7"
      total="300"
      @getCurrentPage="getCurrentPage"
    ></pager>
  </div>
</template>

<script>
export default {
  name: "playlist-content",
  data(){
      return{
        currentPage:1
      }
  },
  methods:{
    // 分页器当前页码
    getCurrentPage(page){
      this.currentPage = page
    },
    // 跳转共用歌单路由组件
    toDetailPlaylist(){
      this.$router.push({
        path:'/detail-playlist',name:'detail-playlist',params:{id:2}
      })
    }
  }
};
</script>

<style scoped lang="scss">
.content-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  .content-item {
    // float: left;
    width: 140px;
    // height: 204px;
    position: relative;
    margin-top: 25px;
    img {
      width: 100%;
      height: 140px;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 140px;
      height: 140px;
      z-index: 0;
      background: url("@/assets/coverall.png") no-repeat;
      background-position: 0 0;
    }
    .icon {
      position: absolute;
      top: 113px;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 27px;
      line-height: 27px;
      color: #ccc;
      font-size: 12px;
      background: url("@/assets/coverall.png") no-repeat;
      background-position: 0 -537px;
      span {
        float: left;
      }
      span:nth-child(1) {
        width: 14px;
        height: 11px;
        background: url("@/assets/iconall.png") no-repeat;
        background-position: 0 -24px;
        margin: 8px 7px 0 10px;
      }
      a {
        float: right;
        width: 16px;
        height: 17px;
        background: url("@/assets/iconall.png") no-repeat;
        background-position: 0 0;
        margin: 5px 10px 0 0;
        &:hover {
          background-position: 0 -60px;
        }
      }
    }
    .top {
      font-size: 14px;
      margin-top: 5px;
      line-height: 24px;
      width: 100%;
      height: 24px;
      color: #333;
      &:hover {
        text-decoration: underline;
      }
    }
    .bottom {
      color: #999;
      font-size: 12px;
      margin-top: 5px;
      a {
        margin: 0 3px;
        color: #666;
        &:hover {
          text-decoration: underline;
        }
      }
      img {
        width: 13px;
        height: 13px;
        vertical-align: middle;
      }
    }
  }
}
</style>